<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script type="text/javascript" th:src="@{js/jquery2.0.js}" charset="utf-8"></script>
<style>
    #border{
        height: 100%;
        background-color: white;
    }
    .top{
        border-bottom: 1px solid #EFEFEF;
        padding: 15px;
    }
    .center{
        padding: 13px;
    }
    .center b{
        font-size: 13px;
    }
    .center input{
        border: 2px solid #EAEAEA;
        border-radius: 6px;
        height: 30px;
        width: 1000px;
    }
    .btn{
        padding: 13px;
    }
    .btn button{
        border: 2px solid #EAEAEA;
        border-radius: 6px;
        background-color: #21BBBD;
        font-size: 12px;
        color: white;
        width: 50px;
        height: 30px;
    }
</style>
<body>
<div id = "border">
    <div class="top">
        <div><b>安全网贷申请</b></div>
    </div>
    <form>
        <div class="center">
            <div><b>借贷金额（元）</b></div>
            <div>
                <input type="text" v-model="param1.l_fund" id="money" maxlength="10" placeholder = "请输入要申请的借贷金额.."/>
            </div>
        </div>
        <div class="center">
            <div><b>年借贷利率（%）</b></div>
            <div>
                <input type="text" readonly v-model="param1.l_lendingrate"  style="background-color: #EEEEEE"/>
            </div>
        </div>
        <div class="center">
            <div><b>借贷期限（天）</b></div>
            <div>
                <input type="text" v-model="param1.l_deadline" id="days" placeholder = "请输入要申请的借贷期限.."/>
            </div>
        </div>
        <div class="btn">
            <button type="submit" onclick="return false" @click="applyFor">申请</button>
        </div>
        <input type="hidden" v-model="param1.as_id"/>
        <input type="hidden" v-model="param1.ls_id"/>
    </form>
</div>

</body>
<script>
    let vm = new Vue({
        el:'#border',
        data(){
            return{
                param1:{
                    l_fund:'',
                    l_lendingrate:'28.45',
                    l_deadline:'',
                    as_id:"2",
                    ls_id:"0"
                }
            }
        },
        methods:{
            applyFor:function(){
                let money =document.getElementById("money");
                let days =document.getElementById("days");
                if (money.value==""){
                    alert("借贷金额不能为空！")
                }else {
                    if (days.value==""){
                        alert("借贷期限不能为空！")
                    }else {
                        let r=confirm("确认借贷"+money.value+"元吗？");
                        if (r==true)
                        {
                            axios.post('/myLoanAdd',Qs.stringify(this.param1)).then(response=>{
                                alert("申请成功，请等待管理员审核。")
                            })
                        }
                    }
                }
            }
        }

    })
</script>

</html>